<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>电影档期</title>
    <link href="//cdn.staticfile.org/layui/2.9.7/css/layui.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>
        layui.use(['element', 'rate'], function() {
            var element = layui.element;
            var rate = layui.rate;

            // 可以在这里初始化其他组件
        });
    </script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #ececf6;
        }

        header {
            background-color: #ffdf7e;
            /* 蓝色 */
            color: #171a1d;
            padding: 20px 0;
            text-align: center;
        }

        nav {
            background-color: #7abaff;
            color: #fff;
            padding: 10px;
            text-align: center;
        }

        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        nav ul li {
            display: inline;
            margin-right: 10px;
        }

        section {
            padding: 20px;
            text-align: center;
        }

        footer {
            background-color: #818182;
            color: #fff;
            text-align: center;
            padding: 10px 0;
            position: fixed;
            bottom: 0;
            width: 100%;
        }

        .movie-poster {
            width: 200px;
            height: auto;
            margin-bottom: 20px;
        }

        .login-button {
            position: absolute;
            top: 70px;
            right: 20px;
            background-color: #cfe2ff;
            color: #23292e;
            padding: 10px 20px;
            border-radius: 5px;
            border: none;
            cursor: pointer;


        }
    </style>

    <style>
        /* 这里是图片栅格颜色和高度等设置 */
        .custom-grid {
            height: 350px;
            background-color: lightgrey;
        }

        .custom-col {
            height: 100%;
            text-align: center;
            border: 1px solid grey;
            margin-left: 42px;
        }

        .custom-co2 {
            height: 200px;
        }
    </style>
    <style>
        .custom-co2 {
            background-color: lightgrey;
            padding: 10px;
            margin-bottom: 10px;
            font-family: "Microsoft YaHei", sans-serif;
        }

        .time-grid {
            font-weight: bold;
            color: black;
        }

        .language-grid {
            font-weight: bold;
        }

        .hall-grid {
            color: #333;
        }

        .price-grid {
            text-align: right;
            color: red;
            font-weight: bold;
            font-size: 24px;
            /* 设置字体大小为24像素 */
        }

        .button-grid {
            display: block;
            text-align: center;
            background-color: #007bff;
            color: white;
            padding: 5px 10px;
            text-decoration: none;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<header>
    <h1>Welcome to 丽江新中数影城</h1>
</header>
<nav>
    <ul>
        <li><a href="http://47.120.11.236:8086/yingcheng">
            影城介绍
        </a>
        <li><a href="http://47.120.11.236:8086/flist">
            影片管理
        </a>
        </li>
        <li>
            <a href="http://47.120.11.236:8086/cinema">
                影厅管理
            </a>
        </li>
        <li>
            <a href="http://47.120.11.236:8086/plist">
                会员管理
            </a >
        </li>
        <li>
            <a href="http://47.120.11.236:8086/vlist">
                会员专区
            </a >
        <li>
            <a href="http://47.120.11.236:8086/Movie_Schedule">
                影片档期
            </a >
        </li>
        <li><a href="http://47.120.11.236:8086/olist">
            在线购票
        </a>
        </li>

        <div class="container">
            <!-- 其他内容 -->
            <li></li>
            <a href="http://47.120.11.236:8086/loginss">
                <button class="login-button">登录
                </button>
            </a>
        </div>


    </ul>
</nav>
<div class="layui-row custom-grid">
    <div class="layui-col-md2 custom-col">
        <img src="../../../img/New_movie_poster/p22.webp" style="width: 100%; height: 100%;" alt="">
    </div>
    <div class="layui-col-md2 custom-col">
        <img src="../../../img/New_movie_poster/p44.webp" style="width: 100%; height: 100%;" alt="">
    </div>
    <div class="layui-col-md2 custom-col">
        <img src="../../../img/New_movie_poster/p33.webp" style="width: 100%; height: 100%;" alt="">
    </div>
    <div class="layui-col-md2 custom-col">
        <img src="../../../img/New_movie_poster/p77.webp" style="width: 100%; height: 100%;" alt="">
    </div>
    <div class="layui-col-md2 custom-col">
        <img src="../../../img/New_movie_poster/p11.webp" style="width: 100%; height: 100%;" alt="">
    </div>
</div>



<div class="layui-tab" lay-filter="test-hash">
    <ul class="layui-tab-title">
        <li class="layui-this" lay-id="11">小鬼当家</li>
        <li lay-id="22">大黄蜂</li>
        <li lay-id="33">魁拔</li>
        <li lay-id="44">周处除三害</li>
        <li lay-id="55">深海长眠</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class="layui-this">4月29号</li>
                    <li>4月30号</li>
                    <li>5月1号</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div class="layui-row">
                            <div class="layui-col-md3 custom-co2">
                                <div class="time-grid">10:10</div>
                                <div class="time-grid">退场时间：11:58</div>
                            </div>
                            <div class="layui-col-md3 custom-co2">
                                <div class="language-grid">国语2D</div>
                                <div class="hall-grid">凤凰影厅/3号厅</div>
                            </div>
                            <div class="layui-col-md4 custom-co2">
                                <div class="price-grid">￥38</div>
                            </div>
                            <div class="layui-col-md2 custom-co2">
                                <a href="http://47.120.11.236:8086/olist" class="button-grid">购票</a>
                            </div>
                            <!-- 我是分  界线 -->
                            <div class="layui-col-md3 custom-co2">
                                <div class="time-grid">13:10</div>
                                <div class="time-grid">退场时间：14:58</div>
                            </div>
                            <div class="layui-col-md3 custom-co2">
                                <div class="language-grid">国语2D</div>
                                <div class="hall-grid">白龙影厅/3号厅</div>
                            </div>
                            <div class="layui-col-md4 custom-co2">
                                <div class="price-grid">￥38</div>
                            </div>
                            <div class="layui-col-md2 custom-co2">
                                <a href="http://47.120.11.236:8086/olist" class="button-grid">购票</a>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="layui-row">
                            <div class="layui-col-md3 custom-co2">
                                <div class="time-grid">10:10</div>
                                <div class="time-grid">退场时间：11:11</div>
                            </div>
                            <div class="layui-col-md3 custom-co2">
                                <div class="language-grid">国语2D</div>
                                <div class="hall-grid">凤凰影厅/6号厅</div>
                            </div>
                            <div class="layui-col-md4 custom-co2">
                                <div class="price-grid">￥38</div>
                            </div>
                            <div class="layui-col-md2 custom-co2">
                                <a href="http://47.120.11.236:8086/olist" class="button-grid">购票</a>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="layui-row">
                            <div class="layui-col-md3 custom-co2">
                                <div class="time-grid">11:00</div>
                                <div class="time-grid">退场时间：11:58</div>
                            </div>
                            <div class="layui-col-md3 custom-co2">
                                <div class="language-grid">国语2D</div>
                                <div class="hall-grid">凤凰影厅/4号厅</div>
                            </div>
                            <div class="layui-col-md4 custom-co2">
                                <div class="price-grid">￥38</div>
                            </div>
                            <div class="layui-col-md2 custom-co2">
                                <a href="http://47.120.11.236:8086/olist" class="button-grid">购票</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-tab-item"><!-- 这里是大黄蜂订票 -->
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class="layui-this">4月29号</li>
                    <li>4月30号</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div class="layui-row">
                            <div class="layui-col-md3 custom-co2">
                                <div class="time-grid">7:00</div>
                                <div class="time-grid">退场时间：9:00</div>
                            </div>
                            <div class="layui-col-md3 custom-co2">
                                <div class="language-grid">英语3D</div>
                                <div class="hall-grid">苹果影厅/1号厅</div>
                            </div>
                            <div class="layui-col-md4 custom-co2">
                                <div class="price-grid">￥55</div>
                            </div>
                            <div class="layui-col-md2 custom-co2">
                                <a href="http://47.120.11.236:8086/olist" class="button-grid">购票</a>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="layui-row">
                            <div class="layui-col-md3 custom-co2">
                                <div class="time-grid">10:00</div>
                                <div class="time-grid">退场时间：12:00</div>
                            </div>
                            <div class="layui-col-md3 custom-co2">
                                <div class="language-grid">国语2D</div>
                                <div class="hall-grid">苹果影厅/2号厅</div>
                            </div>
                            <div class="layui-col-md4 custom-co2">
                                <div class="price-grid">￥55</div>
                            </div>
                            <div class="layui-col-md2 custom-co2">
                                <a href="http://47.120.11.236:8086/olist" class="button-grid">购票</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-tab-item"><!-- 这里是魁拔订票 -->
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class="layui-this">4月29号</li>
                    <li>4月30号</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div class="layui-row">
                            <div class="layui-col-md3 custom-co2">
                                <div class="time-grid">15:00</div>
                                <div class="time-grid">退场时间：16:00</div>
                            </div>
                            <div class="layui-col-md3 custom-co2">
                                <div class="language-grid">国语2D</div>
                                <div class="hall-grid">橘子影厅/3号厅</div>
                            </div>
                            <div class="layui-col-md4 custom-co2">
                                <div class="price-grid">￥45</div>
                            </div>
                            <div class="layui-col-md2 custom-co2">
                                <a href="http://47.120.11.236:8086/olist" class="button-grid">购票</a>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="layui-row">
                            <div class="layui-col-md3 custom-co2">
                                <div class="time-grid">17:00</div>
                                <div class="time-grid">退场时间：18:00</div>
                            </div>
                            <div class="layui-col-md3 custom-co2">
                                <div class="language-grid">国语2D</div>
                                <div class="hall-grid">橘子影厅/4号厅</div>
                            </div>
                            <div class="layui-col-md4 custom-co2">
                                <div class="price-grid">￥45</div>
                            </div>
                            <div class="layui-col-md2 custom-co2">
                                <a href="http://47.120.11.236:8086/olist" class="button-grid">购票</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-tab-item"><!-- 这里是周处除三害订票 -->
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class="layui-this">5月1号</li>
                    <li>5月2号</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div class="layui-row">
                            <div class="layui-col-md3 custom-co2">
                                <div class="time-grid">9:00</div>
                                <div class="time-grid">退场时间：10:00</div>
                            </div>
                            <div class="layui-col-md3 custom-co2">
                                <div class="language-grid">粤语</div>
                                <div class="hall-grid">香蕉影厅/7号厅</div>
                            </div>
                            <div class="layui-col-md4 custom-co2">
                                <div class="price-grid">￥88</div>
                            </div>
                            <div class="layui-col-md2 custom-co2">
                                <a href="http://47.120.11.236:8086/olist" class="button-grid">购票</a>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="layui-row">
                            <div class="layui-col-md3 custom-co2">
                                <div class="time-grid">11:00</div>
                                <div class="time-grid">退场时间：12:00</div>
                            </div>
                            <div class="layui-col-md3 custom-co2">
                                <div class="language-grid">粤语</div>
                                <div class="hall-grid">香蕉影厅/8号厅</div>
                            </div>
                            <div class="layui-col-md4 custom-co2">
                                <div class="price-grid">￥88</div>
                            </div>
                            <div class="layui-col-md2 custom-co2">
                                <a href="http://47.120.11.236:8086/olist" class="button-grid">购票</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-tab-item"><!-- 这里是深海长眠订票 -->
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class="layui-this">5月2号</li>
                    <li>5月3号</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div class="layui-row">
                            <div class="layui-col-md3 custom-co2">
                                <div class="time-grid">15:20</div>
                                <div class="time-grid">退场时间：17:20</div>
                            </div>
                            <div class="layui-col-md3 custom-co2">
                                <div class="language-grid">英语2D</div>
                                <div class="hall-grid">菠萝影厅/3号厅</div>
                            </div>
                            <div class="layui-col-md4 custom-co2">
                                <div class="price-grid">￥138</div>
                            </div>
                            <div class="layui-col-md2 custom-co2">
                                <a href="http://47.120.11.236:8086/olist" class="button-grid">购票</a>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="layui-row">
                            <div class="layui-col-md3 custom-co2">
                                <div class="time-grid">18:20</div>
                                <div class="time-grid">退场时间：20:20</div>
                            </div>
                            <div class="layui-col-md3 custom-co2">
                                <div class="language-grid">英语2D</div>
                                <div class="hall-grid">菠萝影厅/4号厅</div>
                            </div>
                            <div class="layui-col-md4 custom-co2">
                                <div class="price-grid">￥138</div>
                            </div>
                            <div class="layui-col-md2 custom-co2">
                                <a href="http://47.120.11.236:8086/olist" class="button-grid">购票</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<!-- <script src="https://cdn.staticfile.org/layui/2.6.8/layui.all.js"></script>这段地址因为版本过低关于选项卡的逻辑不兼容 -->
<script src="//unpkg.com/layui@2.9.8/dist/layui.js"></script>
<script>
    layui.use(function() {
        var element = layui.element;

        // hash 地址定位
        var hashName = 'tabid'; // hash 名称
        var layid = location.hash.replace(new RegExp('^#' + hashName + '='), ''); // 获取 lay-id 值

        // 初始切换
        element.tabChange('test-hash', layid);
        // 切换事件
        element.on('tab(test-hash)', function(obj) {
            location.hash = hashName + '=' + this.getAttribute('lay-id');
        });
    });
</script>


<div id="test"></div>

<!-- import layui -->
<script>
    layui.use(function() {
        var element = layui.element;
        var $ = layui.$;
        // 动态插入 tab 元素
        $('#test').html(`
		    <div class="layui-tab" lay-filter="demo-filter-tab">
		      <!-- … -->
		    </div>
		  `);
        // 渲染 tab 组件
        element.render('tab', 'demo-filter-tab');
    });
</script>
</body>
</html>